<template>
  <div class="suggest">
    <div class="field-box">
      <van-field
        v-model="message"
        rows="3"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入您的问题，以便我们尽快为您处理"
      />
      <!-- 上传图片组件 -->
      <div class="p-l-15 p-r-15">
        <van-uploader
          v-model="fileList"
          multiple
          :after-read="afterRead"
          preview-size="50px"
          :max-count="5"
        />
      </div>
    </div>
    <div class="contact-info m-t-15">
      <div class="label">请输入联系信息(选填)</div>
      <van-cell-group>
        <van-field v-model="value" placeholder="请输入联系人姓名" />
        <van-field v-model="value" placeholder="请输入联系人电话" />
      </van-cell-group>
    </div>
    <p class="desc">联系人信息将为您加密传输，保护您的隐私</p>
    <button class="btn" type="button">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      fileList: [
        { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://cloud-image", isImage: true }
      ]
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    }
  }
};
</script>
<style lang="scss" scoped>
.suggest {
  padding: 15px;
  .field-box,
  .contact-info {
    overflow: hidden;
    border-radius: 5px;
  }
  // 意见输入区
  .field-box {
    background: #f2f2f2;
    .van-cell {
      background: transparent;
    }
  }
  // 联系人信息
  .contact-info {
    box-shadow: 0px 1px 12px 0px rgba(205, 203, 203, 0.34);
    .label {
      padding: 13px;
      line-height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: #2d2d2d;
    }
  }
  .desc {
    margin: 15px 13px;
    font-size: 12px;
    transform: scale(0.9);
    color: #b9b9b9;
  }
  // 提交按钮
  .btn {
    margin-top: 20px;
    width: 343px;
    height: 45px;
    border: none;
    border-radius: 23px;
    background: linear-gradient(
      267deg,
      rgba(255, 69, 69, 1),
      rgba(252, 127, 118, 1)
    );
    color: #fff;
    box-shadow: 0px 1px 8px 0px rgba(255, 164, 164, 1);
  }
}
</style>